<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_商品列表练习</title>
</head>
<body>
    <table border="1">
        <caption>商品列表</caption>
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>商品库存</th>
        </tr>
    </table>
    <script>
        const arr=[
            {title:'小米手机',price:5000,num:100},
            {title:'华为手机',price:6000,num:200},
            {title:'苹果手机',price:7000,num:300},
            {title:'三星手机',price:8000,num:400},
            {title:'OPPO手机',price:9000,num:500}
        ]
        let tableE=document.querySelector('table');
        for (let i = 0; i < arr.length; i++){
            let trE=document.createElement('tr');
            let titleTd=document.createElement('td');
            let priceTd=document.createElement('td');
            let numTd=document.createElement('td');
            titleTd.innerHTML=arr[i].title;
            priceTd.innerHTML=arr[i].price;
            numTd.innerHTML=arr[i].num;
            trE.append(titleTd,priceTd,numTd);
            tableE.append(trE);
        }
    </script>
</body>
</html>